<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>对商城头条的标题进行截取</title>
<style>
a {
  text-decoration: none;
  color:#000000;
  font-size:14px;
  font-family:"微软雅黑"
}

ul,li{
list-style:none;}
li{
height: 30px;
    line-height: 30px;
    font-size: 12px;
    overflow: hidden;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<ul>
		<li><a href="#"><span>[特惠]</span>{{title1 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title2 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title3 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title4 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title5 | subStr}}</a></li>
	</ul>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			title1 : '商城爆品1分秒杀',
			title2 : '商城与长春市签署战略合作协议',
			title3 : '洋河年末大促，低至两件五折',
			title4 : '华北、华中部分地区配送延迟',
			title5 : '家电狂欢千亿礼券 买1送1！'
        },
		filters : {
			subStr : function(value){
				if(value.length > 10){               //如果字符串长度大于10
   					return value.substr(0,10)+"..."; //返回字符串前10个字符，然后输出省略号
				}else{                               //如果字符串长度不大于10
   					return value;                    //直接返回该字符串
				}
			}
		}
    });
</script>


</body>

</html>



